<template>
	<view class="cu-modal bottom-modal" :class="{'show':isShow}" @click="hide">
		<view class="cu-dialog">
			<view class="goods-data">
				<!-- 图片 -->
				<view class="thumb">
					<image :src="goodDeatil.info.skuDefaultImg" mode=""></image>
				</view>

				<view class="item">
					<view class="title">
						<text></text>
					</view>
					<!-- 价格 -->
					<view class="price">
						<text class="min">￥</text>
						<text class="max">{{totalPrice}}</text>
						<text class="min">.00</text>
					</view>
					<!-- 库存 -->
					<view class="inventory">
						<text>库存：{{goodDeatil.hasStock}}</text>
					</view>
				</view>
			</view>

			<view class="attr-size">
				<view class="attr-list" v-for="(item,index) in AttrSizeList" :key="index">

					<!-- 一级标题  颜色 尺码 -->
					<view class="title">
						<text>{{item.attrName}}</text>
					</view>

					<!-- 二级内容 -->
					<view class="size-list">
						<view class="list" v-for="(value,index2) in item.attrValues" :key="index2" :class="fun1(item,value)==true?'action':''"
						 @click.stop="onClick(index,index2)">

							<text>{{value.attrValue}}</text>

						</view>
					</view>

				</view>

				<view class="attr-number" @click.stop="onStop">
					<view class="tit">数量</view>
					<view class="number">
						<text class="iconfont icon-jian"></text>
						<!-- 数量 -->
						<uni-number-box :min="1" :max="9" v-model="count" @change="countChange" style="margin-right: 20upx;"></uni-number-box>
					</view>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="attr-btn">
				<view class="add-cart" @click="onConfirm(BuyType)">确定</view>
				<!-- <view class="add-cart"  v-if="BuyType === 2"  @click="onConfirm(BuyType)">确定</view> -->
				<!-- <view class="confirm" v-if="BuyType === 2 || BuyType === 3" @click="onConfirm(BuyType)">确定</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	var map = new Map()
	var userInfo = {}
	var attrCount = 0
	export default {
		data() {
			return {
				isShow: false,

				BuyType: 0,

				count: 1,
				
				totalPrice:0,

				goodDeatil: {
					info:{},
					hasStock:true
				},

				AttrSizeList: []
			};
		},
		components: {
			uniNumberBox
		},
		methods: {
			show(type, goodDeatil, skuId) {
				console.log('goodDetail',goodDeatil)
				this.isShow = true;
				this.BuyType = type;
				this.goodDeatil = goodDeatil
				this.AttrSizeList = goodDeatil.saleAttr
				attrCount = this.AttrSizeList.length + 1
				map.clear()
				this.firstShow(skuId)
				map.set('count',this.count)
				this.totalPrice = this.goodDeatil.info.price
			},

			async firstShow(skuId) {
				var list1 = this.goodDeatil.saleAttr[0].attrValues
				var list2 = this.goodDeatil.saleAttr[1].attrValues
				list1.forEach(item => {
					var skuId1 = item.skuIds.split(',')
					list2.forEach(item2 => {
						var skuId2 = item2.skuIds.split(',')
						skuId2.forEach(item3 => {
							if (skuId1.indexOf(item3) != -1 && item3 == skuId) {
								map.set(this.goodDeatil.saleAttr[0].attrName, item)
								map.set(this.goodDeatil.saleAttr[1].attrName, item2)
								this.$emit('sendData', this.goodDeatil, map)
								return
							}
						})
					})
				})
			},

			hide() {
				this.isShow = false;
			},

			countChange(value) {
				var info = this.goodDeatil.info
				this.totalPrice = info.price * Number(value)
				map.set('count', this.count)
			},
			
			onStop() {},


			onClick(index, index2) {

				map.set(this.AttrSizeList[index].attrName, this.AttrSizeList[index].attrValues[index2])

				if (map.size == '3') {
					var skuIds1 = ''
					var skuIds2 = ''
					for (let [key, value] of map) {
						if (key == this.AttrSizeList[index].attrName) {
							skuIds1 = value.skuIds
						} else {
							if (key != 'count') {
								skuIds2 = value.skuIds
							}
						}
					}
					var skuIds1Array = skuIds1.split(',')
					var skuIds2Array = skuIds2.split(',')
					skuIds1Array.forEach(item => {
						if (skuIds2Array.indexOf(item) != -1) {
							var res = this.loadData(item)
						}
					})
				}
			},

			async loadData(skuId) {
				let res = await this.$request({
					url: `front/item/${skuId}.html`,
					params: {},
					methods: 'GET'
				})
				if (res.code == 0) {
					console.log('品牌', res.data.info.skuName)
					console.log('价格', res.data.info.price)
					this.goodDeatil = res.data
				}
				this.$emit('sendData', res.data, map)
			},


			fun1(item, value) {
				if (map.size != 0 && map != null) {
					if (map.get(item.attrName).attrValue == value.attrValue) {
						return true
					}
				}
				return false
			},


			onConfirm(type) {
				var that = this
				console.log('map', map)
				var memberId = ''
				uni.getStorage({
					key: 'userInfo',
					success: res => {
						userInfo = res.data
						memberId = res.data.id
						if (map.size != attrCount) {
							console.log('请选择完整')
							return
						}
						this.toconfirm(type,memberId)
						this.hide()
					},
					fail: err => {
						uni.reLaunch({
							url: '../../pages/user/login'
						})
						return
					}
				})
			},
			
			toconfirm(type,memberId){
				var that = this
				if (type == 1) {
					this.$request({
						url: 'cartorder/cart/addToCart',
						params: {
							"memberId": memberId,
							"skuId": this.goodDeatil.info.skuId,
							"count": this.count,
							"price": this.totalPrice,
							"skuName": this.goodDeatil.info.skuName,
							"image": this.goodDeatil.info.skuDefaultImg
						},
						type: 'POST'
					}).then(res => {
						this.$emit('addCart')
						uni.showToast({
							title: res.msg,
							image: "../../static/icon/cart.png"
						})
					}).catch(err => {
						console.log('catch')
						console.log(err)
					})
				} else {
					if (type == 2) {
						var objList = []
						objList.push({
							skuId: that.goodDeatil.info.skuId,
							skuName: that.goodDeatil.info.skuName,
							skuImage: that.goodDeatil.info.skuDefaultImg,
							totalPrice: this.totalPrice,
							unitPrice: that.goodDeatil.info.price,
							count: that.count
						})
						uni.navigateTo({
							url: `../../pages/order/orderDetails?orderInfo=${encodeURIComponent(JSON.stringify(objList))}&userInfo=${encodeURIComponent(JSON.stringify(userInfo))}`
						})
					}
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'goodAttr.scss';
</style>
